<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="common/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用Layui</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="${ctx }/static/DataTables-1.10.12/media/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="${ctx }/static/DataTables-1.10.12/media/js/jquery.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="${ctx }/static/DataTables-1.10.12/media/js/jquery.dataTables.js"></script>
  
</head>
<body>
<div>
<ul class="layui-nav">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">解决方案</a></li>
  <li class="layui-nav-item"><a href="${ctx}/item/list">后台数据测试</a></li>
</ul>
</div>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">
    	
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<table class="layui-table" id='table_id_example'>
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tfoot>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
       <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </tfoot>
</table>

</body>
<script>
layui.use(['layer', 'element'], function(){
	  var layer = layui.layer
	  ,element = layui.element();
	  //监听Tab切换
	  element.on('tab(demo)', function(data){
	    layer.msg('切换了：'+ this.innerHTML);
	    console.log(data);
	  });
});

$(document).ready( function () {
    $('#table_id_example').DataTable({
        "ajax": {  
            "url": "${ctx}/item/list_page",
            "dataType": "json",
            "type":'post',
            "data": function ( d ) {  
                //添加额外的参数传给服务器  
                d.extra_search = {"xxx":"liss",'yyy':'2323'};  
            }  
        },  
        "processing": true,
        "serverSide": true,
        'autoWidth': true,
        //'pagingType': 'full_numbers',
        'bPaginate' : true,// 分页按钮
        "bFilter" : true,// 搜索栏
        "bLengthChange" : true,// 每行显示记录数
        "iDisplayLength" : 2,// 每页显示行数
        "bSort" : true,// 排序
        "aLengthMenu": [1,2,3,4,5],//定义每页显示数据数量
        //"iScrollLoadGap":400,//用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据
        //"aaSorting": [[4, "desc"]],
        "bInfo" : true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
        "bWidth":true,
        "columns": [ 
              { "data": "id",'sClass':'left'},
              { "data": "num" },
              { "data": "price" },             
              { "data": "title" },             
              { "data": "remark" } 
              /*
  				{ "data": "password",'sClass':'left',"mRender":function(data,type,full){
  					return "<button type='button' onclick=fuck11("+data+")>"+data+"</button>"
  				}
  			   */
        ],    
       /*  "fnRowCallback": function(nRow, aData, iDisplayIndex) {// 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的class风格 
            if (aData.status == 1) {
                $('td:eq(8)', nRow).html("<span class='text-error'>审核中</span>");
            } else if (aData.status == 4) {
                $('td:eq(8)', nRow).html("<span class='text-error'>审核失败</span>");
            } else if (aData.active == 0) {
                $('td:eq(8)', nRow).html("<span>隐藏</span>");
            } else {
                $('td:eq(8)', nRow).html("<span class='text-success'>显示</span>");
            }
            $('td:eq(9)', nRow).html("<a href='' user_id='" + aData.user_id + "' class='ace_detail'>详情</a>");
            if (aData.status != 1 && aData.status != 4 && aData.active == 0) {
                $("<a class='change_ace_status'>显示</a>").appendTo($('td:eq(9)', nRow));
            } else if (aData.status != 1 && aData.status != 4 && aData.active == 1) {
                $("<a class='change_ace_status'>隐藏</a>").appendTo($('td:eq(9)', nRow));
            }
            return nRow;
        }, */
        'language': {    
            'emptyTable': '没有数据',    
            'loadingRecords': '加载中...',    
            'processing': '查询中...',    
            'search': '搜索:',    
            'lengthMenu': '每页 _MENU_ 条记录',    
            'zeroRecords': '没有数据',    
            'paginate': {      
            	"sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
             },    
            'info': '第 _PAGE_ 页 / 共 _PAGES_ 页 , 显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条记录',    
            'infoEmpty': '没有数据',    
            'infoFiltered': '(从 _MAX_ 条记录中筛选)'    
        } 
    });
});

</script>
</html>
